<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside :width="isCollapse ? '64px': '200px'">

        <!-- 添加按钮 点击按钮实现左侧菜单伸缩 -->
        <div @click="handleUpdateCollapse" class="collapseBtn">
          <el-icon v-if="isCollapse"><DArrowRight /></el-icon>
          <el-icon v-else><DArrowLeft /></el-icon>
        </div>

        <!-- 左侧菜单 -->
        <el-menu :default-active="currentPath" class="el-menu-vertical-demo" :router="true" :unique-opened="true" :collapse="isCollapse">
          <!-- sub-menu 一级菜单 -->
          <el-sub-menu :index="item.path" v-for="item in menuList" :key="item.id">
            <template #title>
              <el-icon>
                <!-- 
                  一级菜单图标名称
                  User Grid Goods HelpFilled View
                -->
                <!-- 使用vue提供的动态组件来渲染图标 -->
                <!-- <component is="User"></component> -->
                <!-- <User></User> -->

                <component :is="menuIconList[item.id].icon"></component>
              </el-icon>
              <span>{{ item.authName }}</span>
            </template>

            <!-- el-menu-item 二级菜单 -->
            <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveCurrentPath(subItem.path)">
              <template #title>
                <el-icon>
                  <component :is="menuIconList[item.id].children[subItem.id]"></component>
                </el-icon>
                <span>{{ subItem.authName }}</span>
              </template>
            </el-menu-item>

          </el-sub-menu>
          <!-- 一级菜单 end -->
        </el-menu>
        <!-- 左侧菜单 end -->

      </el-aside>
      <el-main>
        <!-- home页面的右侧实现二级路由 router-view -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import type { Ref } from 'vue'
import { getMenuList } from '../api/HomeApi'

interface menuItemInterface {
  id: number,
  authName: string,
  children: menuItemInterface[],
  order: number | null,
  path: string
}

interface menuIconInterface {
  icon: string
  children: Record<string, string>
}

// 当前二级路由的值
const currentPath = ref('')
// 将点击之后的二级菜单路由值存储到sessionStorage
const saveCurrentPath=(path:string)=>{
  sessionStorage.setItem('path',path)
}

// 状态变量定义左侧菜单栏是否展开
const isCollapse = ref(false)
// 伸缩按钮的单击事件
const handleUpdateCollapse = ()=>{
  isCollapse.value = !isCollapse.value
}

// 菜单栏的图标名与id的索引对象
// Record<string,string> ==> 定义键值都是string的对象
const menuIconList: Ref<Record<string, menuIconInterface>> = ref({
  125: {
    icon: 'User',
    children: {
      110: 'Money'
    }
  },
  103: {
    icon: 'Grid',
    children: {
      111: 'Brush',
      112: 'Umbrella',
    }
  },
  101: {
    icon: 'Goods',
    children: {
      104: 'Brush',
      115: 'Brush',
      121: 'Brush',
    }
  },
  102: {
    icon: 'HelpFilled',
    children: {
      107: 'Money'
    }
  },
  145: {
    icon: 'View',
    children: {
      146: 'Money'
    }
  },
})

const menuList: Ref<menuItemInterface[]> = ref([])
const menuListInit = async () => {
  let res = await getMenuList()
  console.log(res.data.data)
  if (res.data.meta.status === 200) {
    menuList.value = res.data.data
  }
}
onMounted(() => {
  // 左侧菜单初始化
  menuListInit()
  // 根据sessionStorage中的path值，设置currentPath
  currentPath.value = sessionStorage.getItem('path') || ''
})
</script>

<style>
.el-container {
  height: 100%;
}

.el-header {
  background-color: #ccc;
}

.el-aside {
  background-color: #eee;
  transition: width 0.5s;
}

.collapseBtn{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>